<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/echarts.min.js"></script>
		<style> html, body, #app { height: 100%; } </style>
	</head>
	<body>
		<div id="app" style="display: flex; flex-direction: column; width: 90%; margin:auto; height: calc(100% - 50px)">
			<h4 style="flex: none;display: flex; align-items: center; justify-content: space-between">
				历年同月销量柱状图
				<form style="display: flex; align-items: center; font-weight: normal;">
					<input type="checkbox">2012年
					<input type="checkbox">2013年
					<input type="checkbox">2014年
					<input type="checkbox">2015年
					<select style="width: 50px;margin-left: 20px">
						<option>1 月</option><option>2 月</option><option>3 月</option><option>4 月</option><option>5 月</option><option>6 月</option><option>7 月</option><option>8 月</option><option>9 月</option><option>10 月</option><option>11 月</option><option>11 月</option>
					</select>
				</form>
			</h4>
			<div id="container" style="flex:auto"></div>
		</div>
		<script type="text/javascript">
			var dom = document.getElementById('container');
			var myChart = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false
			});
			option = {
				xAxis: {
					type: 'category',
					data: ['2012年', '2013年','2014年','2015年']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			};
			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}
			window.addEventListener('resize', myChart.resize);
		</script>
	</body>
</html>

<style>
	html,
	body,
	#app {
		height: 100%;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		color: #333;
	}

	#app {
		/* padding: 50px; */
		box-sizing: border-box;
	}
</style>
